<template>
  <div v-loading="dataLoading" :class="{'is-mobile': showMobilePage}" class="mengli-detail">
    <div class="ip-info-container">
      <IpInfo v-if="detailData" :is-mobile="showMobilePage" :detail-data="detailData" />
      <div>
        <div
          v-if="hasRouteAuth('mengli:list:create')"
          :style="showMobilePage?{top: '12px', right: '23px'}: 'top: 32px;right:32px'"
          class="edit-btn"
          @click="goEdit('ip')">编辑 <img src="../../../assets/mengli/editIconWhite.png" alt=""> </div>
        <el-button
          :style="showMobilePage?{top: '56px', right: '23px'}: ''"
          type="text"
          size="small"
          class="check-data"
          @click="checkAverageData">更多数据</el-button>
      </div>
    </div>
    <div class="mengli-list-container">
      <div v-if="detailData && detailData.workList.length" :class="{'mengli-tabs': !showMobilePage}">
        <el-tabs v-model="activeName" class="tabs-content" @tab-click="changeTab" >
          <el-tab-pane
            v-for="(item, index) in detailData.workList"
            :key="index"
            :name="item.id.toString()"
            :label="item.name || item.id">
            <div class="mengli-biaoqing-content">
              <div v-if="hasRouteAuth('mengli:list:create')" class="edit-btn" @click="goEdit('work')">编辑 <img src="../../../assets/mengli/editIconWhite.png" alt=""> </div>
              <div v-if="item" class="mengli-item-info">
                <mengliItemInfo v-if="!showMobilePage" :work-data="item" />
                <MobileMengliItemInfo v-else :work-data="item" />
              </div>
              <div class="divider">
                <span v-if="item.updateTime" class="time"> <i class="el-icon-time" style="font-size: 16px;margin-right: 5px;"/> {{ item.updateTime | format('YYYY.MM.DD ') }}</span>
                <span class="dashed"/>
              </div>
              <el-row v-if="showMobilePage" class="mobile-biaoqing-list">
                <el-col
                  v-for="(img, index) in item.imageList"
                  :span="6"
                  :key="index"
                  class="mobile-biaoqing-item"
                  @click="sendNumDialogShow(img.name)">
                  <div class="num-index">NO.{{ index+1 }}</div>
                  <div :style="{backgroundImage: `url(${img.url})`}" class="img"/>
                  <div class="text">“{{ img.name }}”</div>
                  <div class="foot-bar" style="margin-top: 0;">
                    <!-- <span class="title">发送量：</span> -->
                    <span class="num">{{ img.sendNum | moneyFilter }}</span>
                  </div>
                </el-col>
              </el-row>
              <div v-else :id="`biaoqing-list-${item.id}`" class="biaoqing-list">
                <template v-if="item && item.imageList.length > 0">
                  <div
                    v-for="(img, index) in item.imageList"
                    :key="index"
                    :style="{width: itemWidth+'px'}"
                    class="biaoqing-item"
                    @click="sendNumDialogShow(img.name)">
                    <div class="num-index">NO.{{ index+1 }}</div>
                    <el-tooltip class="item" placement="top" effect="dark">
                      <div slot="content" style="max-width: 200px;">发送量趋势</div>
                      <div class="chart-icon">趋势</div>
                    </el-tooltip>
                    <div class="biaoqing-cover"><img :src="img.url" alt=""></div>
                    <div class="keyword">
                      <span v-if="img.name" style="width: 100%;">
                        “<el-tooltip class="item" placement="top" effect="dark">
                          <div slot="content" style="max-width: 200px;">{{ img.name }}</div>
                          <span class="text">{{ img.name }}</span>
                        </el-tooltip>”
                      </span>
                    </div>
                    <div class="foot-bar">
                      <span class="title">发送量：</span>
                      <span class="num">{{ img.sendNum | moneyFilter }}</span>
                    </div>
                  </div>
                </template>
                <div v-else class="empty-container">
                  <img :src="emptyImg" alt="">
                  <div class="empty-text">暂无数据</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-else class="empty-container">
        <img :src="emptyImg" alt="">
        <div class="empty-text">暂无数据</div>
      </div>
      <div v-if="workData" id="mengli-chart-list" class="mengli-chart-list">
        <div v-if="workData.educationPortrait && workData.educationPortrait.Education" class="age" style="border-right: 1px solid #EBEEFD">
          <Title title="学历分布"/>
          <ageAnalysis ref="eduPortraitContainer" :origin-data="workData.educationPortrait.Education" />
        </div>
        <div v-if="workData.agePortrait && workData.agePortrait.Age" class="age">
          <Title title="用户年龄分布"/>
          <ageAnalysis ref="ageAnalysisContainer" :origin-data="workData.agePortrait.Age" :x-axis-rotate="45" />
        </div>
        <div v-if="workData.areaPortrait && workData.areaPortrait.Area" class="area border-bottom">
          <Title style="margin-bottom: 18px;" title="地区分布"/>
          <areaPortrait ref="areaPortraitContainer" :origin-data="workData.areaPortrait.Area" />
        </div>
        <div v-if="workData.sexPortrait && workData.sexPortrait.Sex" class="sex">
          <Title title="用户性别分析"/>
          <sexAnalysis ref="sexAnalysisContainer" :origin-data="workData.sexPortrait.Sex" />
        </div>
        <div v-if="rewardData && rewardData.items && rewardData.items.length" class="area border-bottom" style="width: 100%;border-right: none;">
          <Title style="margin-bottom: 18px;" title="赞赏明细"/>
          <rewardDetail v-loading="rewardLoading" :origin-data="rewardData" is-mobile @getReward="getReward" />
        </div>
        <div v-if="workSendData" class="area" style="padding: 26px 25px 32px 25px;width: 100%;border-right: none;">
          <div :style="showMobilePage?'':{display:'flex'}" style="margin-bottom: 18px;">
            <Title :style="showMobilePage?'margin-bottom: 10px;':'padding-left: 8px;'" title="下载量/发送量"/>
            <el-date-picker
              v-model="workSendDataTime"
              :clearable="true"
              :editable="false"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              format="yyyy/MM/dd"
              size="small"
              unlink-panels
              @change="datePickerTime($event, 1)" />
          </div>
          <sendNumAnalysis
            v-loading="workSendNum"
            ref="workSendNum"
            :origin-data="workSendData"
            :active-range="activeWorkRange"
            :type="1"
            @getSendNum="getSendNum" />
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :append-to-body="false"
      class="order-setting-dialog medium-common-dialog-size"
      width="640px">
      <div style="margin-bottom: 18px;display:flex; align-items: center;">
        <Title style="flex:none;margin-right: 20px;" title="发送量趋势" font-size="16px" />
        <el-date-picker
          v-model="biaoqingSendDataTime"
          :clearable="true"
          :editable="false"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          format="yyyy/MM/dd"
          size="small"
          unlink-panels
          @change="datePickerTime($event, 2)" />
      </div>
      <div v-loading="biaoqingSendLoading" style="min-height:400px" >
        <sendNumAnalysis
          v-if="biaoqingSendData"
          ref="biaoqingSendNum"
          :type="2"
          :empty-top="47"
          :active-range="activeBiaoqiongRange"
          :origin-data="biaoqingSendData"
          @getSendNum="getBiaoqingSendNum" />
      </div>
    </el-dialog>
    <averageData :average-visible="averageVisible" :average-data-obj="averageDataObj" :name="detailData ? detailData.name : ''" @closeDialog="closeDialog"/>
  </div>
</template>
<script>
import { data } from '@/components/Mengli/testData';
import IpInfo from '@/components/Mengli/ipInfo';
import emptyImg from '@/assets/empty-table-data.png';
import { getBiaoqingDetail, getMengliWorkReward, getMengliWorkSendNum, getMengliSendNum, getAverageData } from '@/api/mengli';
import mengliItemInfo from '@/components/Mengli/mengliItemInfo';
import MobileMengliItemInfo from '@/components/Mengli/mobileMengliItemInfo';
import sexAnalysis from '@/components/Mengli/sexAnalysis';
import ageAnalysis from '@/components/Mengli/ageAnalysis';
import areaPortrait from '@/components/Mengli/AreaPortrait';
import rewardDetail from '@/components/Mengli/rewardDetail';
import sendNumAnalysis from '@/components/Mengli/sendNum';
import averageData from '@/components/Mengli/AverageData';
import { moneyFilter } from '@/filters/number';
import Title from '@/components/Title';
import { hasRouteAuth } from '@/utils/permission';
import { format } from '@/filters/date';
import { mapState } from 'vuex';

export default {
  components: {
    IpInfo, mengliItemInfo, MobileMengliItemInfo, rewardDetail,
    sexAnalysis, ageAnalysis, Title, areaPortrait, sendNumAnalysis, averageData },
  filters: { moneyFilter, format },
  data() {
    return {
      today: '',
      dataLoading: false,
      emptyImg,
      detailData: null,
      workSendDataTime: [],
      biaoqingSendDataTime: [],
      activeName: '',
      workData: null,
      itemWidth: 200,
      isInit: true,
      rewardData: {},
      rewardLoading: false,
      workSendNum: false,
      workSendData: null,
      biaoqingSendData: null,
      biaoqingSendLoading: false,
      dialogVisible: false,
      activeBiaoqiongRange: 0,
      activeWorkRange: 0,
      defaultRangeTime: [],
      averageVisible: false,
      averageDataObj: {}
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    console.log(this.showMobilePage);
    this.ipId = this.$route.params.id;
    const today = new Date().setHours(0, 0, 0, 0);
    const day30 = today - 2505600000;
    this.today = today;
    this.defaultRangeTime = [day30, today];
    this.workSendDataTime = this.defaultRangeTime;
    this.biaoqingSendDataTime = this.defaultRangeTime;
    this.getDetailData();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    hasRouteAuth,
    async getDetailData() {
      try {
        const params = {
          id: this.ipId
        };
        this.dataLoading = true;
        const res = await getBiaoqingDetail(params);
        this.dataLoading = false;
        if (res.data && res.code === 200) {
          this.detailData = res.data;
          const ids = [];
          res.data.workList.forEach(i => {
            if (i.id) ids.push(i.id.toString());
            if (i.AreaPortrait) i.AreaPortrait.Area = data;
          });
          if (this.$route.query.workId) {
            this.activeName = this.$route.query.workId || '';
          } else {
            this.activeName = res.data.workList[0].id.toString();
          }
          if (!ids.includes(this.activeName)) {
            this.activeName = ids[0];
          }
          this.changeTab();
          this.isInit = false;
        }
      } catch (error) {
        this.dataLoading = false;
        console.log(error);
      }
    },
    // 获取平均数据
    async getAverage() {
      try {
        const res = await getAverageData(this.ipId);
        if (res.data && res.code === 200) {
          this.averageDataObj = res.data;
          // 对地区分布从高到低进行排序
          if (this.averageDataObj.AreaPortrait && this.averageDataObj.AreaPortrait.Area && this.averageDataObj.AreaPortrait.Area.length) {
            this.averageDataObj.AreaPortrait.Area.sort((a, b) => {
              return b.Province.Num - a.Province.Num;
            });
          }
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取赞赏明细
    async getReward(page = 1) {
      if (!this.activeName) { return; }
      const params = {
        page,
        perPage: 20,
        id: this.activeName
      };
      try {
        this.rewardLoading = true;
        const result = await getMengliWorkReward(params);
        this.rewardLoading = false;
        if (result.code === 200) {
          this.rewardData = result.data;
        }
      } catch (error) {
        this.rewardLoading = false;
        console.log(error);
      }
    },
    datePickerTime(value, type = 1) {
      let params = {};
      if (value && value.length > 0) {
        params = { beginTime: value[0], endTime: value[1] };
      }
      if (type === 1) {
        this.getSendNum(params);
      } else {
        this.getBiaoqingSendNum(params);
      }
    },
    // 表情作品发送量趋势
    async getSendNum(paramsData = {}) {
      if (!this.activeName) { return; }
      const params = {
        id: this.activeName
      };
      if (paramsData.beginTime && paramsData.endTime) {
        params.beginTime = paramsData.beginTime;
        params.endTime = paramsData.endTime;
      }
      if (paramsData.timeRange) params.timeRange = paramsData.timeRange;
      try {
        this.workSendNum = true;
        const result = await getMengliWorkSendNum(params);
        this.workSendNum = false;
        this.activeWorkRange = params.timeRange || 0;
        if (result.code === 200) {
          this.workSendData = result.data;
          this.$nextTick(() => {
            if (this.$refs.workSendNum) this.$refs.workSendNum.handelData();
          });
        }
      } catch (error) {
        this.workSendNum = false;
        console.log(error);
      }
    },
    // 单个表情发送量趋势
    async getBiaoqingSendNum(paramsData = {}) {
      if (!this.activeName) { return; }
      const params = {
        id: this.activeName
      };
      if (paramsData.beginTime && paramsData.endTime) {
        params.beginTime = paramsData.beginTime;
        params.endTime = paramsData.endTime;
      }
      if (paramsData.timeRange) params.timeRange = paramsData.timeRange;
      try {
        this.biaoqingSendLoading = true;
        const result = await getMengliSendNum(params);
        this.biaoqingSendLoading = false;
        this.activeBiaoqiongRange = params.timeRange || 0;
        if (result.code === 200) {
          this.biaoqingSendData = result.data;
          this.$nextTick(() => {
            if (this.$refs.biaoqingSendNum) this.$refs.biaoqingSendNum.handelData(paramsData.nameShow || '');
          });
        }
      } catch (error) {
        this.biaoqingSendLoading = false;
        console.log(error);
      }
    },
    sendNumDialogShow(name) {
      this.dialogVisible = true;
      const params = {
        nameShow: name
      };
      if (this.biaoqingSendDataTime.length === 2) {
        params.beginTime = this.biaoqingSendDataTime[0];
        params.endTime = this.biaoqingSendDataTime[1];
      }
      this.getBiaoqingSendNum(params);
    },
    handleClose() {
      this.dialogVisible = false;
      this.biaoqingSendDataTime = this.defaultRangeTime;
      setTimeout(() => {
        this.biaoqingSendData = null;
        this.activeBiaoqiongRange = 0;
      }, 200);
    },
    changeTab(tab, event) {
      window.onresize = null;
      const workData = this.detailData.workList.find(i => {
        return Number(i.id) === Number(this.activeName);
      });
      if (workData.areaPortrait && workData.areaPortrait.Area && workData.areaPortrait.Area.length) {
        workData.areaPortrait.Area.sort((a, b) => {
          return b.Province.Num - a.Province.Num;
        });
      }
      this.workData = workData;
      this.getReward(1);
      const params = {};
      this.workSendDataTime = this.defaultRangeTime;
      if (this.workSendDataTime.length === 2) {
        params.beginTime = this.workSendDataTime[0];
        params.endTime = this.workSendDataTime[1];
      }
      this.getSendNum(params);
      this.$nextTick(() => {
        this.changeData();
        this.getItemWidth();
        window.onresize = () => {
          return (() => {
            this.getItemWidth();
          })();
        };
      });
    },
    getItemWidth() {
      try {
        if (this.workData && this.workData.imageList.length < 4) {
          this.itemWidth = 200;
          return;
        }
        const biaoqing = document.getElementById(`biaoqing-list-${this.activeName}`);
        if (biaoqing) {
          const num = Math.round(biaoqing.clientWidth / 216);
          let itemWidth = biaoqing.clientWidth / num - 16;
          if (itemWidth > 210) {
            itemWidth = 210;
          }
          this.itemWidth = itemWidth;
        }
      } catch (error) {
        console.log(error);
        this.itemWidth = 200;
      }
    },
    changeData() {
      if (this.$refs.sexAnalysisContainer) {
        this.$refs.sexAnalysisContainer.handelData();
      }
      if (this.$refs.ageAnalysisContainer) {
        this.$refs.ageAnalysisContainer.handelData();
      }
      if (this.$refs.eduPortraitContainer) {
        this.$refs.eduPortraitContainer.handelData();
      }
      if (this.$refs.areaPortraitContainer) {
        this.$refs.areaPortraitContainer.handleCurrentChange(0);
      }
    },
    changeContainer() {
      if (this.$refs.sexAnalysisContainer) {
        this.$refs.sexAnalysisContainer.changeSize();
      }
      if (this.$refs.ageAnalysisContainer) {
        this.$refs.ageAnalysisContainer.changeSize();
      }
      if (this.$refs.eduPortraitContainer) {
        this.$refs.eduPortraitContainer.changeSize();
      }
    },
    goEdit(type) {
      const name = type === 'ip' ? 'mengliIpEdit' : 'mengliEdit';
      this.$router.push({
        name,
        query: { ipId: this.ipId, workId: this.activeName }
      });
    },
    checkAverageData() {
      this.averageVisible = true;
      this.getAverage();
    },
    closeDialog() {
      this.averageVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.mengli-detail {
  margin: 20px;
  &.is-mobile {
    margin: 12px;
  }
  &::v-deep {
    .el-range-editor {
      width: 240px;
      .el-range-separator {
        width: 24px;
      }
      .el-range-input {
        width: 40%;
      }
    }
  }
}
.ip-info-container {
  position: relative;
  -webkit-box-shadow: 2px 4px 13px 0px #dde1ea;
  padding: 32px 32px 32px 44px;
  box-shadow: 2px 4px 13px 0px #dde1ea;
  background-color: #fff;
  border-radius:12px;
  margin-bottom: 24px;
}
.mengli-list-container {
  -webkit-box-shadow: 2px 4px 13px 0px #dde1ea;
  padding: 32px;
  box-shadow: 2px 4px 13px 0px #dde1ea;
  background-color: #fff;
  border-radius:12px;
  margin-bottom: 24px;
  .mengli-tabs {
    display: flex;
    margin-bottom: 0;
    .tabs-content {
      width: 100%;
      & ::v-deep {
        .el-tabs__header {
          margin-bottom: 1px;
          border-bottom: none;
        }
        .el-tabs__content {
          border-radius:0px 4px 0px 0px;
          border:1px solid rgba(235,238,253,1);
        }
        .el-tabs__nav-wrap::after {
          display: none
        }
        .el-tabs__active-bar {
          display: none;
        }
        .el-tabs__item {
          height:40px;
          background:rgba(251,251,253,1);
          border-radius:4px 4px 0px 0px;
          border:1px solid rgba(235,238,253,1);
          border-bottom: none;
          padding: 0 28px;
          margin-right: 8px;
          font-size: 14px;
          &.is-active {
            font-size: 14px;
            color: #fff;
            background: #406EFF;
          }
        }
      }
    }
  }
}
.mengli-biaoqing-content {
  // border-radius:0px 4px 4px 4px;
  // border:1px solid rgba(235,238,253,1);
  position: relative;
  .mengli-item-info {
    padding: 32px 0;
    margin: 0 32px;
    box-sizing: border-box;
    // border-bottom: 1px dashed #EBEEFD;
    position: relative;
  }
}
.biaoqing-list {
  padding: 32px 0 16px 0;
  margin: 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .biaoqing-item {
    cursor: pointer;
    width:200px;
    height:218px;
    background:rgba(255,255,255,1);
    box-shadow:1px 1px 8px 0px rgba(221,225,234,1);
    border-radius:8px;
    margin: 0 8px;
    margin-bottom: 16px;
    padding: 21px 16px 16px 16px;
    position: relative;
    .biaoqing-cover {
      width:120px;
      height:120px;
      margin: 0 auto;
      img {
        width:120px;
        height:120px;
        object-fit: cover;
        border-radius: 4px;
      }
    }
    .keyword {
      text-align: center;
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(51,51,51,1);
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px dashed #EBEEFD;
      .text {
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
        max-width: 80%;
      }
    }
    &:hover {
      .chart-icon {
        display: block;
      }
    }
  }
}

.foot-bar {
  margin-top: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .title {
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:14px;
  }
  .num {
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:14px;
  }
}
.edit-btn {
  position: absolute;
  width:80px;
  height:32px;
  background:rgba(64,110,255,1);
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 16px;
  font-size:16px;
  font-family:PingFangSC-Medium,PingFang SC;
  color:#fff;
  line-height:32px;
  top: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  z-index: 10;
  img {
    margin-left:5px;
    width: 15px;
    height: 15px;
  }
  &:hover {
    background: #2a58f0;
  }
}
.check-data {
  position: absolute;
  top: 80px;
  right: 32px;
  color: rgba(64,110,255,1);
  border-radius: 4px;
  border: 1px solid rgba(64,110,255,1);
  padding: 7px 10px;
}
.chart-icon {
  position: absolute;
  font-size: 13px;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:16px;
  right: 5px;
  top: 5px;
  cursor: pointer;
  z-index: 10;
  display: none;
}
.mengli-chart-list {
  display: flex;
  border: 1px solid #EBEEFD;
  border-top: none;
  border-radius:0px 0px 4px 4px;
  flex-wrap: wrap;
  margin-top: 12px;
  .sex {
    width: 50%;
    padding: 32px 32px 0 32px;
    border-bottom: 1px solid #EBEEFD;
    overflow: hidden;
  }
  .age {
    width: 50%;
    padding: 32px 32px 0 32px;
    border-bottom: 1px solid #EBEEFD;
    overflow: hidden;
  }
  .area {
    width: 50%;
    padding: 32px 30px 32px 32px;
    border-right: 1px solid #EBEEFD;
    overflow: hidden;
  }
  .border-bottom {
    border-bottom: 1px solid #EBEEFD;
  }
}
.order-setting-dialog {
  & ::v-deep {
    .el-dialog {
      border-radius: 12px;
      // height: 430px;
    }
    // .el-dialog__body {
    //   padding: 2px 32px 0 32px;
    // }
  }
}
.empty-container {
  text-align: center;
  position: relative;
  width: 100%;
  // top: 30px;
  img {
    width: 200px;
  }
  .empty-text {
    color: #666;
    font-size: 14px;
  }
}
.num-index {
  font-size: 14px;
  position: absolute;
  left: 10px;
  top: 5px;
}
.divider {
  padding: 0 32px;
  display: flex;
  align-items: center;
  .time {
    padding: 0 12px;
    height:26px;
    background:rgba(238,241,254,1);
    border-radius:16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(64,110,255,1);
    line-height:14px;
    .img {
      width: 16px;
      height: 16px;
    }
    margin-right: 40px;
  }
  .dashed {
    border: 1px dashed #EBEEFD;
    flex: 1;
    height: 1px;
  }
}
.mengli-detail.is-mobile  {
  .ip-info-container {
    box-shadow: none;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 12px;
  }
  .divider {
    padding: 0;
    margin-bottom: 12px;
  }
  .biaoqing-list {
    padding: 12px 0 0 0;
    margin: 0;
  }
  .mengli-list-container {
    box-shadow: none;
    border-radius: 6px;
    padding: 12px;
    .mengli-item-info {
      padding: 0;
      margin: 0;
    }
  }

  .mengli-chart-list {
    border: none;
    margin-top: 12px;
    .sex {
      width: 100%;
      padding: 0 !important;
      border: none !important;
    }
    .age {
      width: 100%;
      padding: 0 !important;
      border: none !important;
    }
    .area {
      width: 100%;
      padding: 0 !important;
      border: none !important;
    }
  }
}
.mobile-biaoqing-list {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  .mobile-biaoqing-item {
    padding: 6px;
    position: relative;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    &:nth-child(4n) {
      border-right-color: transparent;
    }
    .text {
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      width: 100%;
      border-bottom: 1px dashed #EBEEFD;
    }
    .img {
      width: 100%;
      height:0;
      padding-bottom:100%;
      background-size: cover;
    }
  }
}
</style>
